<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- 全局css -->
    <link rel="stylesheet" href="../css/bootstrap.min.css?v=3.3.7">
    <link rel="stylesheet" href="../fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="../fonts/web-icons/web-icons.css">
    <link rel="stylesheet" href="../js/plugins/elementui/index.css">
    <link rel="stylesheet" href="../js/plugins/toastr/toastr.css">
    <link rel="stylesheet" href="../css/skins/style.css" >
    <link rel="stylesheet" href="../css/common.css" >
    <link rel="stylesheet" href="../css/sys.css" >
    <link rel="stylesheet" href="../css/plugins/jsTree/jstree.css" />

    <!-- 全局js -->
    <script src="../js/plugins/jquery/jquery.min.js?v=2.1.4"></script>
    <script src="../js/plugins/layer/layer.min.js"></script>
    <script src="../js/plugins/bootstrap/bootstrap.min.js?v=3.3.6"></script>
    <script src="../js/plugins/vue/vue.min.js"></script>
    <script src="../js/plugins/elementui/index.js"></script>
    <script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="../js/plugins/toastr/toastr.min.js"></script>
    <script src="../js/plugins/tableExport/libs/FileSaver/FileSaver.min.js"></script>
    <script src="../js/plugins/tableExport/libs/js-xlsx/xlsx.core.min.js"></script>
    <script src="../js/plugins/tableExport/tableExport.min.js"></script>
    <script src="../js/plugins/jsTree/jstree.min.js"></script>
    <script src="../js/common.js"></script>

</head>
<body class="gray-bg">

<div class="wrapper-content" id="rrapp" v-cloak>
    <div class="row" v-show="showList">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <label>平台:</label>
                    <el-radio-group v-model="plat" size="medium" @change="platChange">
                        <el-radio-button :label="item.id"
                                         v-for="item in platList"
                        >{{item.platName}}</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
        </div>
    </div>
    <div class="row cmm">
        <div class="col-sm-12">
            <div class="ibox " v-show="showList">
                <div class="ibox-title">
                    <h5>角色</h5>
                    <div class="ibox-tools" >
                        <button class="btn btn-primary " @click="add">
                            <i class="fa fa-plus"></i>&nbsp;新增
                        </button>

                        <button class="btn btn-info "  v-if="false">
                            <i class="fa fa-filter"></i>
                        </button>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row" >
                        <div class="search">
                            <div class="form-group col-sm-2">
                                <input type="text" class="form-control" v-model="q.searchName" @keyup.enter="query"
                                       placeholder="名称">
                            </div>
                            <a class="btn btn-info" @click="query"><i class="fa fa-search"></i> 查询</a>
                        </div>

                        <div class="export">
                            <div class="ibox-tools" >
                                <el-dropdown size="medium" split-button type="default" @click="exportExl" @command="handleCommand">
                                    <i class="fa fa-download"></i> 导出数据
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="a">csv</el-dropdown-item>
                                        <el-dropdown-item command="b">txt</el-dropdown-item>
                                        <el-dropdown-item command="c">Excel</el-dropdown-item>
                                        <el-dropdown-item command="d">服务器下载</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                        <div class="dataTable">
                                <table id="data" class="table  table-bordered table-hover">
                                    <thead class="thead-default">
                                    <tr >
                                        <th class="text-center" style="width: 50px">#</th>
                                        <th class="text-center" v-for="ols in columnsList">{{ols.name}}</th>
                                        <th class="text-center" style="width: 150px">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in dataList">
                                        <td class="text-center">{{index+1}}</td>
                                        <td class="text-center" v-if="columnsList[0].isShow">{{item.roleName}}</td>
                                        <td class="text-center" v-if="columnsList[0].isShow">{{item.remark}}</td>
                                        <td class="text-center">
                                            <button class="btn btn-xs btn-info "
                                                    @click="update(item.roleId)">
                                                <i class="fa fa-edit"></i>修改
                                            </button>
                                            <button class="btn btn-xs btn-danger" @click="delOne(item.roleId)">
                                                <i class="fa fa-trash-o"></i>删除
                                            </button>
                                        </td>

                                    </tr>

                                    </tbody>
                                </table>
                                <div class="text-center" v-show="dataList.length == 0">没有数据</div>
                                <div class="text-right" v-show="dataList.length > 0">
                                    <el-pagination
                                            @size-change="pageSizeChange"
                                            @current-change="pageCurrentChange"
                                            :current-page="page.page"
                                            :page-sizes="[30, 50, 100, 200]"
                                            :page-size="30"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="page.total">
                                    </el-pagination>
                                </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="ibox role" v-show="!showList">
                <div class="ibox-title">
                    <h5>{{title}}角色</h5>
                    <div class="ibox-tools" >
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="panel-vue dataInput">
                        <el-form  class="form-horizontal" :model="sysRole" ref="sysRoleForm" :rules="rules">
                            <el-row class="form-group">
                                <el-col :xs="24" :span="6"  class="control-label">
                                    <span>角色名称:</span>
                                </el-col>
                                <el-col :xs="24" :span="18">
                                    <el-form-item prop="roleName">
                                        <el-input v-show="!showView" v-model="sysRole.roleName"
                                                  auto-complete="off"></el-input>
                                        <div v-show="showView"> {{sysRole.roleName}}</div>
                                    </el-form-item>

                                </el-col>
                            </el-row>

                            <el-row class="form-group">
                                <el-col :xs="24" :span="6"  class="control-label">
                                    <span>备注:</span>
                                </el-col>
                                <el-col :xs="24" :span="18">
                                    <el-form-item prop="remark">
                                        <el-input v-show="!showView" v-model="sysRole.remark"
                                                  auto-complete="off"></el-input>
                                        <div v-show="showView"> {{sysRole.remark}}</div>
                                    </el-form-item>

                                </el-col>
                            </el-row>

                            <el-row class="form-group">
                                <el-col :xs="24" :span="6"  class="control-label">
                                    <span>授权:</span>
                                </el-col>
                                <el-col :xs="24" :span="18">

                                        <div class="jstree-box">
                                            <div class="jstree-tools clearfix">
                                                <div class="btn-group btn-group-sm pull-right" role="group">
                                                    <button type="button" @click="openAll"
                                                            class="btn btn-icon btn-outline btn-default btn-unfold">
                                                        <i class="fa fa-angle-down"></i></button>
                                                    <button type="button" @click="closeAll"
                                                            class="btn btn-icon btn-outline btn-default btn-fold">
                                                        <i class="fa fa-angle-up"></i></button>
                                                </div>
                                                <div class="pull-left">
                                                    <div class="input-search" style="display: none">
                                                        <button type="button" class="input-search-btn" >
                                                            <i class="icon wb-search" aria-hidden="true"></i></button>
                                                        <input type="text" class="form-control input-sm" name="jstree_search" placeholder="快速查找...">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="pagetree margin-top-10">
                                                <div id="slimScroll">
                                                    <div id="jstree"></div>
                                                </div>
                                            </div>
                                        </div>



                                </el-col>
                            </el-row>

                        </el-form>
                        <div class="grid-btn text-center">
                            <a v-show="!showView" v-if="hasPermission('sysrole:save')" class="btn btn-primary"
                               @click="saveOrUpdate"><i class="fa fa-save"></i>&nbsp;保存</a>
                            <a v-show="showView" v-if="hasPermission('sysrole:update')" class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
                            <a v-show="showView" v-if="hasPermission('sysrole:delete')" class="btn btn-danger" @click="delOne"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
                            <a  class="btn btn-default" @click="reload"><i class="fa fa fa-mail-reply"></i>&nbsp;返回</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>




<script src="../sys/js/sysRole.js"></script>
</body>
</html>
